<template>
  <div class="book-simple-component-box">
    <router-link :to="`/ContentDisplay/BookDetail/${bookData.id}?f=${path}&code=${code}`">
      <img class="book-seal" :src="bookData.cover" alt=""/>
    </router-link>
    <div class="book-info-box">
      <router-link
          class="book-info-item book-title"
          :to="`/ContentDisplay/BookDetail/${bookData.id}?f=${path}&code=${code}`"
      >
        {{ bookData.title }}
      </router-link>
      <div class="book-info-item ">{{ `提供机构：${bookData.from || '--'}` }}</div>
      <div class="book-info-item">{{ `出版时间：${yearMonthDate(bookData.time) || '--'}` }}</div>
      <div class="book-info-item">{{ `出版机构：${bookData.author || '--'}` }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BookSimpleComponent",
  props: {
    bookData: {
      type: Object,
      default() {
        return {}
      },
    },
    path: String,
    code: String
  },
    methods:{
        yearMonthDate(Date){
            if(!Date)return Date
            let val = Date.split(' ')[0];
            val = val.split('-');
            return val[0] + '年' + val[1] + '月'
        }
    }
}
</script>

<style lang="less" scoped>
@import "../../../assets/global.less";

@media only screen and (max-width: 576px) {
  @width: 27vw;
  @height: 60vw;
  .book-simple-component-box {
    width: @width;
    height: @height;

    .book-seal {
      width: @width;
      height: calc(@height - 20vw);
      display: block;
      box-shadow: 0 0 1px rgba(0, 0, 0, 0.4);
      object-fit: cover;
    }

    .book-info-box {
      width: @width;
      height: 20vw;

      .book-info-item {
        font-size: 3vw;
        height: 5vw;
        line-height: 5vw;
        font-weight: normal;
        .line-ellipsis(1);
        color: black;
      }

      .book-title {
        font-weight: bold;
        color: black;
      }
    }
  }
}

@media only screen and (min-width: 576px) {
  @width: 140px;
  @height: 280px;
  .book-simple-component-box {
    width: @width;
    height: @height;

    .book-seal {
      width: @width;
      height: calc(@height - 80px);
      display: block;
      box-shadow: 0 0 1px rgba(0, 0, 0, 0.4);
      object-fit: cover;
    }

    .book-info-box {
      width: @width;
      height: 80px;

      .book-info-item {
        font-size: 8px;
        height: 20px;
        line-height: 20px;
        font-weight: normal;
        .line-ellipsis(1);
        color: black;
      }

      .book-title {
        font-weight: bold;
      }
    }
  }

}

</style>
